<template>
    <view class="password">
        <u-form class="password-form" :model="form" ref="form" :error-type="['toast']">
            <u-form-item class="password-form_item" prop="email" left-icon="email" :left-icon-style="iconStyle">
                <u-input v-model="form.Email" :placeholder="$t('mine.input_email')" :disabled="this.type == 1"/>
            </u-form-item>
            <u-form-item class="password-form_item" prop="code" left-icon="lock" :left-icon-style="iconStyle">
               <u-verification-code :seconds="seconds" :start-text="startText" :end-text="endText" :change-text="changeText" @end="end" @start="start" ref="uCode" @change="codeChange"></u-verification-code>
               <u-button type="primary" @tap="getCode" slot="right" size="mini" :disabled="buttonDisable">{{tips}}</u-button>
                <u-input v-model="form.code" type="number" :placeholder="$t('mine.input_verify_code')" />
            </u-form-item>
        </u-form>
        <view class="password-button">
            <u-button v-if="form.EmailVerify == 1" type="primary" @click="submit">{{$t('mine.btn_save')}}</u-button>
            <u-button v-if="form.EmailVerify == 2" type="primary" @click="submit">{{$t('mine.next_step')}}</u-button>
        </view>
    </view>
</template>

<script>
import pageMixin from '@/utils/pageMixin';
export default {
  mixins: [pageMixin],
		data() {
			return {
				form: {
						Email: '',
						code: ''
				},
				buttonDisable: false,
				iconStyle: {
						fontSize: '38rpx',
						color: '#646466',
						display: 'flex'
				},
				rules: {
						Email: [
								{
										required: true,
										message: this.$t('mine.msg_email'),
										type: 'email'
								}
						],
				},
        type: 0,
				tips: '',
				startText: this.$t('mine.get_verify_code'),
				endText: this.$t('mine.regain_verify_code'),
				changeText: "x" + " " + this.$t('mine.second'),
				seconds: 60,
			}
		},

		onLoad(option) {
		  this.type = option.type;
			if(option.type == 1){
				uni.setNavigationBarTitle({
					title: this.$t('mine.verify_email')
				});
			} else {
				uni.setNavigationBarTitle({
					title: this.$t('mine.edit_email')
				});
			}
			this.getInfo();
		},
		onShow() {
		},
		onReady() {
				this.$refs.form.setRules(this.rules);
		},
		components: {
		},
		computed: {
			i18n(){
				return this.$t('mine')
			}
		},
		methods: {
			getInfo() {
				this.$http.get('/client/user/account/info', {}).then(res => {
					this.form = res;
				});
			},
      codeChange(text) {
				this.tips = text;
			},
			getCode() {
				this.$refs.form.validate(valid => {
					if (valid) {
						if(this.$refs.uCode.canGetCode) {
							this.$http.get('/client/user/account/email/code', {email: this.form.Email}).then(res => {
								setTimeout(() => {
									this.$u.toast(this.$t('mine.send_success'));
									
									// 通知验证码组件内部开始倒计时
									this.$refs.uCode.start();
								}, 1000);
							 });
						} else {
							this.$u.toast(this.$t('mine.regain_after'));
						}
					} else {
						console.log('验证失败');
					}
				});
			},
			end() {
				this.buttonDisable = false;
			},
			start() {
				this.buttonDisable = true;
			},
      submit() {
				let that = this;
				this.$refs.form.validate(valid => {
					if (valid) {
						if (this.form.code == undefined || this.form.code == '') {
							uni.showToast({
								title: this.$t('mine.input_verify_code'),
								icon: 'none'
							});
							return;
						}
						let data = {
							email: this.form.Email,
							code: this.form.code,
							email_verify: this.form.EmailVerify,
						};
						this.$http.post('/client/user/account/email/verify', data).then(res => {
							if (this.form.EmailVerify == 2) {
								that.$u.route({
									type: 'navigateTo',
									url: '/pages/mine/email/modify/index'
								});
								return;
							}
							uni.showToast({
								title: this.$t('mine.save_success')
							});
							setTimeout(function () {
								that.$u.route({
									type: 'back',
									delta: 1
								});
							}, 1000);
						});
						} else {
								console.log('验证失败');
						}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
    .password {
        height: 100vh;
        background-color: #ffffff;
    }
    .password-form {
        padding: 0 30rpx;
        margin-bottom: 60rpx;
    }
    .password-button {
        padding: 0 80rpx;
    }
</style>
